<template>
    <div>
        我是父组件
        <!-- 使用子组件son -->
        <button @click="count++">count++--父组件中{{ count }}</button>
        <hr />
        <Son :count1='count' :username='username' :shoplistArr="shoplistArr" :addcount="addcount"></Son>
    </div>
</template>

<script>
import Son from './Son.vue';

//  父传子:
// 01: 方式1: 通过props
// 实现: 在父组件中找到子组件, 然后给子组件设置属性props, 然后在子组件中接收该属性
// 子组件中接收的属性就是数据, 实现了父传子, 子组件中接收的属性会自动挂载 到当前组件的实例上

// 注意: 父传子 可以传递数据(字符串,number...对象 数组, 函数)

// 单向数据流:
// 定义: 父组件传递给子组件的数据, 子组件不能直接去修改,需要遵守单向数据流的原则


// 方式2: 通过在子组件中this访问到父组件的实例, 进而获取到父组件中的数据和方法等等

export default {
    data() {
        return {
            count: 100,
            username: '成龙',
            shoplistArr: [
                { id: 1, proname: '手表', price: 10000 },
                { id: 2, proname: '切尔西皮鞋', price: 50000 },
                { id: 3, proname: '腰带', price: 2000 }
            ]
        }
    },
    methods: {
        addcount() {
            this.count++
        }
    },
    components: {
        Son
    }
}
</script>
<style scoped></style>